<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="zhangsan()">张三</button> ||<button onclick="lisi()">李四</button>
    <br>
    <br>
    <button onclick="send()">发布</button>
</body>
<script>
    let bus = {
        //存放订阅者消息
        list: [],
        // 发布者
        emit(eventName, msg) {
            //根据eventName找到list中的eventName 所对应的回调
            let index = this.list.findIndex((item) => {
                return item.name === eventName
            })
            if (index !== -1) {
                //给指定用户发布信息
                this.list[index].event(msg)
            }
        },
        // 订阅者
        on(eventName, callback) {
            console.log('订阅成功');
            let obj = {
                name: eventName,
                event: callback
            }
            this.list.push(obj)
            console.log(this.list);
        }
    }
    function zhangsan() {
        // 参数一 订阅名称  参数二   订阅回调
        bus.on('zhangsan', ((msg) => {
            console.log(msg);
        }))
    }
    function lisi(){
        bus.on('lisi',(msg)=>{
            console.log(msg);
        })
    }
    function send() {
        // 参数一: 订阅者名称   参数: 发布的消息
        // bus.emit('zhangsan','张三是你嘛')
       bus.emit('lisi', '李四收?')
      
    }
</script>

</html>